<template>
    <el-drawer v-model="childConfig.DrawerStatus" :title="childConfig.title" :before-close="handleClose" size="30%">
        <el-form ref="ruleForm" label-width="100px" :model="formData" label-position="top" :rules="rules">
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-form-item label="邮箱">
                        <el-input v-model="user.email" placeholder="请输入角色名称" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="姓名">
                        <el-input  v-model="user.username" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="formData.password" type="password" placeholder="请输入要修改的密码" show-password></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div class="drawer-footer">
            <el-button @click="handleClose(false)">取消</el-button>
            <el-button type="primary" @click="confirmButtonHandle">确定</el-button>
        </div>
    </el-drawer>
    
</template>


<script setup>
import {reactive, computed, toRefs, ref} from 'vue'
import {useStore} from 'vuex'
import {useRouter} from "vue-router"

import { editUser } from '^/user.js'
import AesEncrypt from '@/utils/aesEncrypt'
import { removeCookie } from '@/utils/cookie'

const store = useStore()
const router = useRouter()
const user = computed(() => store.getters.user.userInfo)
// 接收父组件值
const props = defineProps({
    childConfig: {
        type: Object
    }
})
// 在定义emits的事件，才能通过emits给指定的事件修改父组件的值
const emits = defineEmits(['upDrawerStatus'])
// 接收父组件值
const {childConfig} = toRefs(props)
const ruleForm = ref(null)

const formData = reactive({
    userId: user.value.userId
})

// 表单校验
const rules = reactive({
    password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
})


/**
 * 接口api
 */
const methods = {
    editHandleApi: () => {
        ruleForm.value.validate((vaild) => {
            console.log(vaild)
            if (vaild){
                const {userId, password} = formData
                editUser({userId, password: AesEncrypt.encrypt(password)}).then(res => {
                    console.log("更新", res.data.data, res.data.message)
                    formData.password = ''
                    handleClose()
                    removeCookie('token')
                    router.push('/login')
                }, err => {
                    console.log("更新异常", err)
                })
            }
        })
    }
}

/**
 * 界面操作api
 */
/**
 * 
 */
const handleClose = () => {
    console.log('关闭抽屉')
    emits('upDrawerStatus', false)
}
const confirmButtonHandle = () => {
    methods.editHandleApi()
}
</script>


<style lang="scss" scoped>
.drawer-footer{
    position: absolute;
    bottom: 15px;
    right: 15px;
}
</style>